<!--  -->
<template>
  <div class="container">
    <van-nav-bar :title="activityname" />
    <div class="vote_banner">
      <img src="../assets/vote_img.jpeg">
    </div>
    <div class="rule_container">
      <!-- <div class="rule_title">
        <van-icon name="info-o" style="margin-right:5px" />
        <h5 style="font-weight:bold;margin:0">活动说明</h5>
      </div> -->
      <div class="rule_list">
        <div class="rule_list_item">
          <transition name="van-slide-down">
            <div class="rule_list_title" v-show="visible">
              <van-icon name="bullhorn-o" style="margin-right:5px" />
              <h5>活动介绍</h5>
            </div>
          </transition>
          <div class="rule_list_content">
            <div class="line"></div>
            <p class="describe">
              为进一步弘扬中华民族传统文化，更好地发挥慈善事业，在保障和改善民生方面的，导向作用及先进典型的示范引领作用，激发社会各界关心、参与慈善事业的热情，带动更多社会力量参与慈善事业，区政府决定开展首届“玄武慈善奖”评选活动。
            </p>
          </div>
        </div>
        <div class="rule_list_item">
          <transition name="van-slide-down">
            <div class="rule_list_title" v-show="rulevisible">
              <van-icon name="orders-o" style="margin-right:5px" />
              <h5>投票规则</h5>
            </div>
          </transition>
          <div class="rule_list_content">
            <div class="line"></div>
            <p class="describe">
              一、最具爱心慈善捐赠企业或单位

              1、大力支持和积极参与慈善事业，自愿捐款捐物及为社会提供慈善服务，推动慈善事业发展。

              2、社会慈善形象好，模范履行其社会责任。

              3、捐赠额在50万元（含物资折价）以上，经核实到账或落实；并参考企业资产规模、纳税情况及履行社会责任等情况。



              二、最具爱心慈善捐赠个人

              1、长期支持和参与慈善事业，自愿捐款捐物及为社会提供志愿服务。

              2、捐赠额在20万元（含物资折价）以上，经核实已经到账；并参考个人资产规模、纳税情况及本人多年参与慈善事业等情况。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        rulevisible: false,
        activityname: ""
      };
    },

    components: {},
    created() {
      this.activityname = this.$store.state.title
    },
    computed: {},

    mounted: {},
    mounted() {
      this.visible = true
      setTimeout(() => {
        this.rulevisible = true
      }, 500);
    },
    methods: {}
  }
</script>
<style scoped lang="less">
  .container {
    width: 100%;
    margin-bottom: 100px;

    .vote_banner {
      width: 100%;
      margin: 0 auto;

      img {
        width: 95%;
        box-shadow: 5px 5px 15px rgb(223, 223, 223);
        border-radius: 5px;
        margin-top: 5px;
      }
    }

    .rule_container {
      padding: 0 10px;

      .rule_title {
        display: flex;
        align-items: center;
        margin-top: 10px;

      }

      .rule_list {
        .rule_list_item {
          .rule_list_title {
            display: flex;
            align-items: center;
            color: #ee0a24;
          }

          .rule_list_content {
            display: flex;
            position: relative;

            .line {
              position: absolute;
              top: 0;
              bottom: 0;
              width: 1px;
              border-right: 1px dashed #ee0a24;
              margin: 0 5px;

            }

            .describe {
              font-size: 12px;
              color: rgb(100, 99, 99);
              text-align: left;
              text-indent: 2em;
              margin-left: 20px;
              background: rgba(238, 238, 238, 0.418);
              padding: 10px;
              border-radius: 5px;
              margin-top: 0;
              margin-bottom: 20px;
            }
          }
        }
      }
    }
  }
</style>